// 它定义了一个 TimerProvider 组件，用于在应用的不同组件之间共享倒计时状态。
// 组件使用了 createContext 创建上下文，
// 使用了 useState 管理状态，并将状态和状态更新函数通过上下文传递给子组件。
import {
    Dispatch,//定义状态
    ReactNode,//子节点类型
    SetStateAction,//定义状态
    createContext,//创建上下文
    useState,//管理状态。
} from "react";

interface TimerContextProps {
    duration: number;//倒计时的当前值，
    setDuration: Dispatch<SetStateAction<number>>;//更新 duration 的状态更新函数
}
//用 createContext 创建一个上下文对象，并定义了默认值
export const TimerContext = createContext<TimerContextProps>({
    duration: 10,
    setDuration: () => {},
});
//表示 TimerProvider 组件的子节点，类型为 ReactNode
interface TimerProviderProps {
    children: ReactNode;
}

const TimerProvider = ({ children }: TimerProviderProps) => {
    const [duration, setDuration] = useState(10);
    console.log('====================================');
    console.log(duration,setDuration);
    console.log('====================================');
    return (
        //使用 TimerContext.Provider 组件包裹子节点，
        //并将 duration 和 setDuration 作为上下文的值传递给子组件
        <TimerContext.Provider value={{ duration, setDuration }}>
            {children}
        </TimerContext.Provider>
    );
};

export default TimerProvider;
